<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检测数据的原理</title>
</head>
<body>
    <div class="aa">数据没更新</div>
</body>
<script>
    /* 
    简易版的数据检测(数据劫持) vm 中的_data改变了 Observer 能收到消息 做其他操作 
    Vue 的数据代理就是用了这个原理,当数据发生变化时,重新编译(包括形成虚拟dom,数据比对...)更新dom节点
     */
    let data = {
        name:'liwiehua',
        age:18
    }
    
    const obs = new Observer(data)
    const vm = {}
    vm._data = data = obs 
    //添加属性name age 和他们的getter setter
    function Observer(data){
        const keys = Object.keys(data)
        keys.forEach((item)=>{
            Object.defineProperty(this,item,{
                get(){
                    return data[item]
                },
                set(val){
                    data[item] = val
                    console.log('数据更新了,做其他操作');
                    let aa = document.querySelector('.aa')
                    aa.innerHTML = '数据更新了'
                }
            })
        })
    }
</script>
</html>